/**
 * 组件封装：提取页面中公共布局的部分。实现复用。针对UI层面优化
 *
 */

/**
 * 现在有两个组件，页面布局不一样。
 * 但是 data数据、methods、watch、声明周期很多内容都一样。
 */

TabA.vue
// export default {
       minxis:["mymixin"]
//     data(){
//         return {
//             msg:"",
//             title:"",
//             index:1
//         }
//     },
//     methods:{
//         change(){

//         },
//         show(){

//         }
//     }
// }

main.js
import Vue from "vue"
//任何组件都默认有这个混入后代码
Vue.minxis = {
    data(){
        return {
            index:1
        }
    }
}

TabB.vue
import mymixin from "./mymixin"
export default {
    mixins:[mymixin],
    data(){
        return {
           end:"2023",
           //组件本身优先级更高
           begin:"1290",
        }
    },
    
    methods:{
        play(){

        }
    }
}